<script setup>
import { ref } from 'vue'
import { pcaTextArr } from 'element-china-area-data'
import { bus } from '@/utils/common/mitt'
import { getClassApi, getCollegeApi, getIntershipTypeApi, majorListQueryApi } from '@/api/baseData'
import { getAllCounselorInfoApi } from '@/api/job'
import { useUserStore } from '@/stores/user';
import MAP from '@/components/common/map.vue'

const formRef = ref(null)
// 定义组件的props属性
const props = defineProps({
  // 表单数据对象，用于初始化表单
  data: {
    type: Object,
    default: {}
  },
  // 表单配置项数组，用于定义表单字段
  formOpt: {
    type: Array,
    default: []
  },
  // 按钮配置项数组，用于定义表单按钮
  btnOpt: {
    type: Array,
    default: []
  },
  // 是否行内表单布局
  inline: {
    type: Boolean,
    default: true
  },
  isShowMap:{
    type: Boolean,
    default: false
  },
  isRules:{
    type: Boolean,
    default: true
  }
})

const formData = ref(Object.assign({}, props.data))
const emits = defineEmits(['handleForm'])

const rules = {
  name: [
    {
      required: true,
      message: '请输入姓名',
      trigger: 'blur'
    }
  ],
  phone: [
    {
      required: true,
      message: '请输入手机号'
    }
  ],
  account: [
    {
      required: true,
      message: '请输入账号',
      trigger: 'blur'
    }
  ],
  class: [
    {
      required: true,
      message: '请输入班级',
      trigger: 'blur'
    }
  ],
  college: [
    {
      required: true,
      message: '请输入学院'
    }
  ],
  major: [
    {
      required: true,
      message: '请输入专业'
    }
  ],
  jobDesc: [
    {
      required: true,
      message: '请输入职位描述',
      trigger: 'blur'
    }
  ],
  jobRequire: [
    {
      required: true,
      message: '请输入职位要求',
      trigger: 'blur'
    }
  ],
  salary: [
    {
      required: true,
      message: '请输入薪资',
      trigger: 'blur'
    }
  ],
  jobName: [
    {
      required: true,
      message: '请输入职位名称',
      trigger: 'blur'
    }
  ],
  jobDetailLocation: [
    {
      required: true,
      message: '请输入详细地址',
      trigger: 'blur'
    }
  ],
  jobLocation: [
    {
      required: true,
      message: '请选择地址',
      trigger: 'change'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'change'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'change'
    }
  ],
  repassword: [
    {
      required: true,
      message: '请确认密码',
      trigger: 'change'
    }
  ],
  enterpriseName: [
    {
      required: true,
      message: '请输入企业名称',
      trigger: 'change'
    }
  ],
  enterpriseAddress: [
    {
      required: true,
      message: '请输入企业地址',
      trigger: 'change'
    }
  ],
  detailAddress: [
    {
      required: true,
      message: '请输入企业详细地址',
      trigger: 'change'
    }
  ],
  industry: [
    {
      required: true,
      message: '请选择企业所属行业',
      trigger: 'change'
    }
  ],
  detail: [
    {
      required: true,
      message: '请输入企业详情',
      trigger: 'change'
    }
  ]
}
function handleForm(type) {
  if (type == 'cancel') {
    emits('handleForm', type)
  } else {
    formRef.value.validate((valid) => {
      if (valid) {
        emits('handleForm', type, formData.value)
        reset()
      } else {
        return false
      }
    })
  }
}
function reset() {
  formRef.value.resetFields()
}
// 对外提供方法
defineExpose({
  reset
})
// 获取学院列表
const collegeList = ref([])
async function getCollegeListData() {
  const res = await getCollegeApi()
  collegeList.value = res.data.map((item) => {
    return {
      label: item.college,
      value: item.college
    }
  })
}
getCollegeListData()

// 专业选择器
const majorList = ref([])
async function getMajorListData(data) {
  const res = await majorListQueryApi({ college: data })
  majorList.value = res.data.map((item) => {
    return {
      label: item.major,
      value: item.major
    }
  })
}
// 专业发生变化
const classList = ref([])
async function handleMajorChange(data) {
  const res = await getClassApi({ college: formData.value.college, major: formData.value.major })
  classList.value = res.data?.map((item) => {
    return {
      label: item.class,
      value: item.class
    }
  })
}
bus.on('delete', () => {
  getCollegeListData()
})
const instructArr = ref([])
async function getAllCounselorInfo() {
  const res = await getAllCounselorInfoApi()
  instructArr.value = res.data
}
getAllCounselorInfo()
// 获取实习类型
const intershipType = ref([])
const usertStore=useUserStore()
async function getIntershipType() {
  const res = await getIntershipTypeApi()
  let data=res.data.map(item=>{
   if (item.college=='*') {
    return item
   }else if (item.college==usertStore.userInfo.college|| item.college=='*'||item.college.includes(usertStore.userInfo.college)) {
    return item
   }else if(item.major==usertStore.userInfo.major|| item.major=='*'|| item.major.includes(usertStore.userInfo.major)) {
    return item
   }else if(usertStore.userInfo.class && (usertStore.userInfo.class.includes(item.major)|| item.class=='*'||item.class==usertStore.userInfo.class)) {
    return item
   }
  })
  
  intershipType.value = data.filter(item => item?.type).map(item => ({
    label: item.type,
    value: item.type
  }))
  intershipType.value = [...new Set(intershipType.value.map((item) => JSON.stringify(item)))].map(
    (item) => JSON.parse(item)
  )
}
getIntershipType()
// 地图点击事件
function handleSelectMarker(data){
  formData.value.position = [data.location.lng,data.location.lat]
  console.log(data);
  formData.value.detailAddress = data.name
  console.log('坐标',formData.value.position);
  formData.value.enterpriseAddress = data.district
}
function handleInstructorSelect(e) {
  formData.value.instructor = e
}
</script>

<template>
  <div class="form-wrapper">
    <el-form
      :model="formData"
      :inline="props.inline"
      ref="formRef"
      label-width="auto"
      label-position="left"
      label-suffix="："
      :rules="isRules?rules:''"
    >
      <el-form-item
        v-for="(item, index) in props.formOpt"
        :key="index"
        :label="item.label"
        :prop="item.prop"
      >
        <!-- 身份和普通文本框 -->
        <el-input
          v-model.trim="formData[item.prop]"
          v-if="item.type == 'input'"
          :disabled="item.prop == 'identity' || item.disabled == true"
          :readonly="item.readonly==true"
        ></el-input>
        <!-- 文本域 -->
        <el-input
          v-model.trim="formData[item.prop]"
          v-if="item.type == 'textarea'"
          :autosize="{ minRows: 4, maxRows: 8 }"
          type="textarea"
          style="width: 195px"
        ></el-input>
        <!-- 密码 -->
        <el-input
          v-model.trim="formData[item.prop]"
          v-if="item.type == 'password'"
          show-password
          type="password"
          style="width: 195px"
        ></el-input>
        <!-- 选择器下拉框 -->
        <el-select
          v-model.trim="formData[item.prop]"
          v-if="item.type == 'select'"
          placeholder="请选择"
          style="width: 195px"
        >
          <el-option
            v-for="obj in item.options"
            :key="obj.value"
            :label="obj.label"
            :value="obj.value"
          />
        </el-select>
        <!-- 学院选择器 -->
        <el-select
          v-model.trim="formData[item.prop]"
          v-if="item.type == 'selectCollege'"
          placeholder="请选择学院"
          style="width: 195px"
          @change="getMajorListData"
        >
          <el-option
            v-for="obj in collegeList"
            :key="obj.value"
            :label="obj.label"
            :value="obj.value"
          />
        </el-select>
        <!-- 专业选择器 -->
        <el-select
          v-model.trim="formData[item.prop]"
          v-if="item.type == 'selectMajor'"
          placeholder="请选择专业"
          style="width: 195px"
          @change="handleMajorChange"
        >
          <el-option
            v-for="obj in majorList"
            :key="obj.value"
            :label="obj.label"
            :value="obj.value"
          />
        </el-select>
        <!-- 班级选择器 -->
        <el-select
          v-model.trim="formData[item.prop]"
          v-if="item.type == 'selectClass'"
          placeholder="请选择专业"
          style="width: 195px"
        >
          <el-option
            v-for="obj in classList"
            :key="obj.value"
            :label="obj.label"
            :value="obj.value"
          />
        </el-select>
        <!-- 辅导员选择器 -->
        <el-select
          v-model.trim="formData[item.prop].name"
          v-if="item.type == 'instructorSelect'"
          placeholder="请选择班级辅导员"
          style="width: 195px"
          @change="handleInstructorSelect"
        >
          <el-option
            v-for="obj in instructArr"
            :key="obj.teacherNumber"
            :label="`${obj.name}(${obj.teacherNumber})`"
            :value="obj"
          />
        </el-select>
        <!-- 实习类型选择器 -->
        <el-select
          v-model.trim="formData[item.prop]"
          v-if="item.type == 'selectIntership'"
          placeholder="请选择实习类型"
          style="width: 195px"
        >
          <el-option
            v-for="obj in intershipType"
            :key="obj.teacherNumber"
            :label="obj.label"
            :value="obj.value"
          />
        </el-select>

        <!-- 地址选择器 -->
        <el-cascader
          v-if="item.type == 'address'"
          style="width: 195px"
          :options="pcaTextArr"
          v-model="formData[item.prop]"
        >
        </el-cascader>
      </el-form-item>
      <div class="map-container" v-if="isShowMap">
        <MAP @SelectMarker="handleSelectMarker"></MAP>
      </div>
      <el-form-item class="btn-group-wrapper">
        <div class="btn-group">
          <el-button
            v-for="(item, index) in props.btnOpt"
            :key="index"
            plain
            :type="item.type"
            @click="handleForm(item.prop)"
          >
            {{ item.name }}
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.form-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
}

.map-container {
  flex: 1;
  min-width: 300px;
  max-width: 1000px;
  height: 300px;
  margin-bottom: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}

:deep() {
  .el-form-item--label-left .el-form-item__label {
    justify-content: flex-end;
  }
  .el-input {
    box-sizing: border-box;
  }
}

// 添加按钮组样式
.btn-group-wrapper {
  width: 100%;
  margin-bottom: 0;

  :deep(.el-form-item__content) {
    justify-content: center;
    margin-left: 0 !important;
  }

  .btn-group {
    display: flex;
    justify-content: center;
    gap: 20px;

    .el-button {
      width: 120px;
      height: 40px;
      margin: 0;
      padding: 0;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
 
}

</style>
